<template>
  <div class="productCard">
    <slot name="user"></slot>
    <div class="cardBody">
      <slot></slot>
      <nut-image
        :src="
          options.image_list?.length > 0
            ? commonStore.img_domain + options.image_list[0]
            : 'https://google-quanjing-game.oss-cn-hangzhou.aliyuncs.com/chenxing/error.png '
        "
        @click="showFn(commonStore.img_domain + options.image_list[0])"
      >
        <template #error>
          <nut-image
            src="https://google-quanjing-game.oss-cn-hangzhou.aliyuncs.com/chenxing/error.png"
          />
        </template>
      </nut-image>

      <div class="cardRigth">
        <p class="title texthiden" v-if="!titleWidth">
          {{ options.goods_name }}
        </p>
        <p class="titleS texthiden" v-else>{{ options.goods_name }}</p>
        <p class="type texthiden" v-if="!titleWidth">
          {{ options.goods_spec }}
        </p>

        <p class="typeS texthiden" v-else>{{ options.goods_spec }}</p>
        <p class="price"><span>￥</span>{{ options.format_price }}</p>
      </div>
      <div class="count acenter">
        <nut-image
          :src="getAssetsFile('productCard/reduce.png')"
          @click="reduceCount"
        ></nut-image>
        <p>{{ options.quantity }}</p>
        <nut-image
          :src="getAssetsFile('productCard/plus.png')"
          @click="plusCount"
        ></nut-image>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { getAssetsFile } from "@/utils/pub-use";
import useCommonStore from "@/store/common";
const commonStore = useCommonStore();
const props = defineProps<{ options: any; titleWidth?: boolean }>();
const emits = defineEmits(["reduce", "plus", "show"]);

const reduceCount = () => {
  emits("reduce");
};
const plusCount = () => {
  emits("plus");
};

const showFn = (url: string) => {
  emits("show", url);
};
</script>

<style lang="scss" scoped>
.productCard {
  border-bottom: 1px solid #eeeeee;
  .cardBody {
    position: relative;
    display: flex;
    align-items: center;
    padding: 30px 0;
    .nut-image {
      :deep(img) {
        width: 160px;
        height: 160px;
        border-radius: 19px;
      }
    }
    .cardRigth {
      margin-left: 24px;
      .title {
        width: 498px;
        font-weight: 500;
        font-size: 28px;
        color: #000000;
      }
      .titleS {
        width: 433px;
        font-weight: 500;
        font-size: 28px;
        color: #000000;
      }
      .type {
        margin-top: 11px;
        width: 450px;
        font-size: 24px;
        color: #999999;
      }
      .typeS {
        margin-top: 11px;
        width: 433px;
        font-size: 24px;
        color: #999999;
      }
      .price {
        color: #f55726;
        font-size: 22px;
        font-weight: 500;
        margin-top: 46px;
      }
    }
    .count {
      position: absolute;
      right: 20px;
      bottom: 20px;
      .nut-image {
        :deep(img) {
          width: 44px;
          height: 44px;
        }
      }
      p {
        width: 78px;
        text-align: center;
        font-size: 28px;
        font-weight: 500;
        color: #333333;
      }
    }
  }
}
</style>
